<template>
    <div class="basic-upplier-container">
		<el-card shadow="hover">
            <el-button type="primary" icon="ele-Plus" @click="openAdd()"> 新增班次 </el-button>
		</el-card> 
        <el-card v-loading="state.shiftListloading" class="full-table" shadow="hover" style="margin-top: 8px">
            <el-table  ref="tableRef" :data="state.shiftlist_Data">
                <!-- <el-table-column type="selection" width="55" />  -->
                <el-table-column prop="name" label="班次名称" width="150" />
                <el-table-column prop="sections" label="考勤时间">
                    <template #default="scope">
                        {{getTimeRangeStr(scope.row.sections)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button @click="openEdit(scope.row)" size="small" text type="primary"> 编辑 </el-button>
                        <el-button @click="openDelete(scope.row)" size="small" text type="primary"> 删除 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <EditForm ref="editFormRef" :title="state.editFormTitle" @updateData="updateData" />
    </div>
</template>

<style>
    .tooltip-base-box {
        width: 200px;
    }
    .tooltip-base-box .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .tooltip-base-box .center {
    justify-content: center;
    }
    .tooltip-base-box .box-item {
    width: 110px;
    margin-top: 10px;
    }
</style>

<script lang="ts" setup name="turnRegular">
    import { onMounted, reactive, ref,defineAsyncComponent,nextTick } from 'vue'; 
    import { ElMessageBox, ElMessage } from 'element-plus';
    import { auth } from '/@/utils/authFunction';

    // 引入组件
    import EditForm from '/@/views/attendance/shift/component/edit.vue'
    const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
    const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
    const tableRef = ref<RefType>(); 
    import { ListAttendanceShift,deleteAttendanceShift } from '/@/api-services/api';
    const editFormRef = ref<InstanceType<typeof EditForm>>();


    const state = reactive({
        editFormTitle: '',
        shiftListloading:false,
        shiftlist_Data:[],//考勤组列表
    });

    onMounted(async () => {
        loadListData();
    });
    const loadListData=()=>{
        state.shiftListloading=true;
        ListAttendanceShift({page:1,PageSize:10}).then((rlt)=>{ 
            state.shiftlist_Data=rlt.data.result;
            state.shiftListloading=false;
        })
    }
    const getTimeRangeStr=(_items:Array<any>)=>{
        let timeStr='';
        if(_items && _items.length>0){
            _items.forEach(element => {
                if(element && element.punches.length>0){
                    let tempTimeStep="";
                    element.punches.forEach(punchesItem => {
                        tempTimeStep+=punchesItem.checkTime.substr(11,5)+"-";
                    });
                    if(tempTimeStep.length>0){
                        tempTimeStep=tempTimeStep.substring(0,tempTimeStep.length-1);
                        timeStr=timeStr+tempTimeStep+"  ";
                    }
                }
            });
        }
        return timeStr;
    }

    // 更新数据
    const updateData = () => {
        loadListData(); 
    };

    // 打开新增页面
    const openAdd = () => {
        state.editFormTitle = '新增考勤班次';
        editFormRef.value?.openDialog({});
    };
    // 打开编辑页面
    const openEdit = (row: any) => {
        state.editFormTitle = '编辑考勤班次';
        editFormRef.value?.openDialog(row);
    };

    // 删除
    const openDelete = (row: any) => {
        ElMessageBox.confirm(`确定删除考勤班次：【${row.name}】?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(async () => { 
            deleteAttendanceShift(row).then((rlt)=>{
                ElMessage.success('删除成功');
                loadListData();
			}); 
        })
        .catch(() => {});
    };
</script>